<template>
  <div class="base-certificate">
    <van-nav-bar
      title="认证"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      safe-area-inset-top
    />
    <div class="certificate-form">
      <van-form @submit="onSubmit">
        <van-field name="idpic1" label="上传身份证人脸面照片" :rules="[{ required: true, message: '请上传' }]">
          <template #input>
            <van-uploader
              accept="image/png, image/jpeg"
              v-model="idpic1"
              :max-count="1"
              :before-delete="beforeDelete1"
              :before-read="asyncBeforeRead"
            />
          </template>
        </van-field>
        <van-field name="idpic2" label="上传身份证国徽面照片" :rules="[{ required: true, message: '请上传' }]">
          <template #input>
            <van-uploader
              accept="image/png, image/jpeg"
              v-model="idpic2"
              :max-count="1"
              :before-delete="beforeDelete2"
              :before-read="asyncBeforeRead"
            />
          </template>
        </van-field>
        <van-field
          v-model="userformdata.name"
          name="name"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写自己的姓名' }]"
        />
        <van-field
          v-model="userformdata.wid"
          name="wid"
          label="职工号"
          placeholder="职工号"
          :rules="[{ required: true, message: '请填写自己的职工号' }]"
        />
        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="userformdata.sex" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="userformdata.gro"
          name="gro"
          label="集团号"
          placeholder="集团号"
          :rules="[{ required: true, message: '请填写集团号' }]"
        />
        <van-field
          v-model="userformdata.station"
          name="station"
          label="站段号"
          placeholder="站段号"
          :rules="[{ required: true, message: '请填写站段号' }]"
        />
        <van-field
          v-model="userformdata.shop"
          name="shop"
          label="车间号"
          placeholder="车间号"
          :rules="[{ required: true, message: '请填写车间号' }]"
        />
        <van-field
          v-model="userformdata.job"
          name="job"
          label="岗位"
          placeholder="岗位"
          :rules="[{ required: true, message: '请填写自己的岗位' }]"
        />

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "certificate",
  data() {
    return {
      formDate: null,
      idpic1: [],
      idpic2: [],
      userformdata: {
        name: "fly",
        wid: "fly001",
        sex: 1,
        gro: "集团1",
        station: "站段1",
        shop: "车间1",
        job: "码农",
      },
    };
  },
  methods: {
    onSubmit() {
      this.$toast.loading({
        message: "提交中...",
        forbidClick: true,
        duration: 0,
      });
      this.formDate = new FormData();
      this.formDate.append("file1", this.idpic1[0].file);
      this.formDate.append("file2", this.idpic2[0].file);
      this.formDate.append("uid", sessionStorage.getItem("userid"));
      this.formDate.append("name", this.userformdata.name);
      this.formDate.append("wid", this.userformdata.wid);
      this.formDate.append("sex", this.userformdata.sex);
      this.formDate.append("gro", this.userformdata.gro);
      this.formDate.append("station", this.userformdata.station);
      this.formDate.append("shop", this.userformdata.shop);
      this.formDate.append("job", this.userformdata.job);

      this.HttpManager.certification_insert(this.formDate)
        .then((res) => {
          this.$toast.clear();
          if (res.code !== 0) this.$notify({ type: "danger", message: res.msg });
          else {
            this.idpic1 = [];
            this.idpic2 = [];
            this.$notify({ type: "warning", message: "等待审核" });
            this.$router.push("home");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$notify({
            type: "danger",
            message: "上传图片文件大小超出限额！",
          });
          this.$toast.clear();
        });
    },
    // 返回 Promise
    asyncBeforeRead(file) {
      return new Promise((resolve, reject) => {
        if (file.type !== "image/jpeg" && file.type !== "image/png") {
          this.$toast("请上传 jpg/png 格式图片");
          reject();
        } else {
          resolve(file);
        }
      });
    },
    beforeDelete1() {
      this.idpic1 = [];
    },
    beforeDelete2() {
      this.idpic2 = [];
    },
    onClickLeft() {
      this.$router.push("login");
    },
    sendtelcode() {
      if (this.userformdata.tel) {
        this.telcodeisseed = true;
        setTimeout(() => {
          this.telcodeisseed = false;
        }, 60 * 1000);
        //向后端请求验证码
      }
    },
  },
};
</script>

<style lang="less" scoped>
  .base-certificate {
    height: 100%;
    overflow: auto;

    .certificate-form {
      margin-top: 46px;
    }
  }
</style>
